<template>
    <div class="header">
        用户列表
        <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
    </div>

    <!-- ----------------------表格数据渲染------------------------------- -->
    <el-table :data="UserTableData" style="width: 100%;">
        <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="email" label="邮箱" />

        <el-table-column prop="gender" label="性别">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.gender == 1">男</el-tag>
                <el-tag type="success" v-else-if="scope.row.gender == 2">女</el-tag>
                <el-tag v-else>保密</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- ----------------分页--------------------- -->
    <el-pagination v-model:current-page="currentPage" background layout="prev, pager, next" :total="100" />




    <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="form">
            <el-form-item :label-width="formLabelWidth">
                <el-input v-model="form.username" placeholder="用户名" autocomplete="off" />
                <el-input v-model="form.password" placeholder="密码" autocomplete="off" />
                <el-input v-model="form.email" placeholder="邮箱" autocomplete="off" />
                <el-input v-model="form.mobile" placeholder="手机号" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="form.gender">
                    <el-radio label="男" />
                    <el-radio label="女" />
                    <el-radio label="保密" />
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { getUserList } from '../../../api/https';
const UserTableData = ref([])
const currentPage = ref(1)
const dialogFormVisible = ref(false)

const form = reactive({
    username: '',
    password: '',
    email: '',
    mobile: '',
    gender: false,
})


getUserList().then(res => {
    console.log(res.data.paginate.data);
    UserTableData.value = res.data.paginate.data
})


</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.el-input {
    margin-bottom: 20px;
}
</style>